import React, { PureComponent } from 'react';
import { Spin } from 'antd';
import xxtx from '../../../assets/busi/InvestmentManage/stockGroupOrder/card_border_left.png'; // 左侧边框条
import qz from '../../../assets/busi/InvestmentManage/stockGroupOrder/weigth_bg.png'; // 右侧小图标
import gpgs from '../../../assets/busi/InvestmentManage/stockGroupOrder/stock_bg.png'; // 右侧小图标
import jezh from '../../../assets/busi/InvestmentManage/stockGroupOrder/amount_sum_bg.png'; // 右侧小图标
import style from './index.less';

export default class Card extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  // 单个组件样式
  omeComponent = (text, num, img, loading) => {
    return (
      <div className='oneArea_main'>
        <div className='main_2'>
          <div className='left_img'>
            <img src={xxtx} style={{ height: '100px', width: '4px' }} />
          </div>
          <div className='cardName' style={{ marginLeft: '20px' }}>
            <span>{text}</span>
          </div>
          <div className='cardNum' style={{ marginLeft: '20px' }}>
            {loading ? <Spin spinning={true} /> : <span>{num == undefined || num == 'undefined%' ? '--' : num}</span>}
          </div>
          <div className='cardImg'>
            <img src={img} style={{ height: '60px', width: '60px' }} />
          </div>
        </div>
      </div>
    );
  };

  render() {
    const { stockNumber, cardData, loading } = this.props;
    return (
      <div className={style.mainCompont}>
        <div className='main_body' style={{ height: 'calc(100% - 54px)' }}>
          {this.omeComponent('选择股票个数', stockNumber, gpgs)}
          {this.omeComponent('总分配权重', `${cardData?.realityWeight ? Number(cardData.realityWeight * 100).toFixed(2) : cardData?.realityWeight}%`, qz, loading)}
          {this.omeComponent('实际权重', `${cardData?.realityWeightSum ? Number(cardData.realityWeightSum * 100).toFixed(2) : cardData?.realityWeightSum}%`, qz, loading)}
          {this.omeComponent('实际分配金额总和', cardData?.realityMoneySum ? Number(cardData.realityMoneySum).toFixed(2) : cardData.realityMoneySum, jezh, loading)}
        </div>
      </div>
    );
  }
}
